<script>
import VueClamp from 'vue-clamp';

export default {
  name: 'MyBookmark',
  data() {
    return {
      bookmarks: []
    }
  },
  components: {
    VueClamp
  },
  created() {
    this.getAllBookmark()
  },
  methods: {
    getAllBookmark() {
      this.chrome.bookmarks.getTree((bookmarks) => {
        const allBookmarks = [];

        const getBookmarks = (bookmarkArray) => {
          for (const bookmark of bookmarkArray) {
            if (bookmark.url) {
              allBookmarks.push(bookmark);
            } else if (bookmark.children) {
              getBookmarks(bookmark.children);
            }
          }
        }

        getBookmarks(bookmarks);

        this.bookmarks = allBookmarks
        console.log(this.bookmarks);
      });
    },
    faviconURL(url) {
      const faviconUrl = new URL(this.chrome.runtime.getURL("/_favicon/"));
      faviconUrl.searchParams.set("pageUrl", url);
      faviconUrl.searchParams.set("size", "32");
      return faviconUrl.toString();
    },
  }
}
</script>

<template>
  <div class="my-bookmark">
    <div class="fixed-bookmark bookmark-card">
      <div class="header">
        <span>已固定</span>
        <div class="button">
          <button>所有应用</button>
        </div>
      </div>
      <div class="content">
        <div class="bookmark-list">
          <div class="bookmark-item" v-for="item in bookmarks" :key="item.index">
            <img class="bookmark-favicon" :src="faviconURL(item.url)" alt="">
            <div class="bookmark-title">
              <vue-clamp autoresize :max-lines="2"> {{ item.title }}</vue-clamp>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="recommend-bookmark bookmark-card">
      <div class="header">
        <span>推荐的项目</span>
        <div class="button">
          <button>更多</button>
        </div>
      </div>
      <div class="content">
        <div class="bookmark-list">
          <div class="bookmark-item" v-for="item in bookmarks" :key="item.index">
            <img class="bookmark-favicon" :src="faviconURL(item.url)" alt="">
            <div class="bookmark-title">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.my-bookmark {
  .bookmark-card {
    .header {
      display: flex;
      justify-content: space-between;
      margin: 0 57px;
    }
  }
}

.fixed-bookmark {
  .bookmark-list {
    width: 600px;
    height: 300px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .bookmark-item {
      height: 100px;
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px;

      .bookmark-title {
        margin-top: 12px;
        width: 100%;
        text-align: center;
      }
    }
  }
}

.recommend-bookmark {
  .bookmark-list {
    width: 600px;
    height: 180px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 57px;
    .bookmark-item {
      height: 60px;
      width: 50%;
      display: flex;
      align-items: center;
      .bookmark-title {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
      }
    }
  }
}

::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;
}
</style>